﻿@*---------------test part commented-----------*@
@*<script>
        var testAuth = function () {
            model.username('Admin');
            model.password('secret');
            authenticate();
        }
        var testDeleteProduct = function () {
            deleteProduct(2);
        }
        var testChangeProduct = function () {
            var product = model.products()[2];
            product.Price = product.Price + 10;
            saveProduct(product);
        }

        var testDeleteOrder = function () {
            deleteOrder(1);
        }
        var testSaveOrder = function () {
            var order = model.orders()[0];
            order.TotalPrice = order.TotalPrice + 10;
            saveOrder(order);
        }
    </script>
    <div class="alert alert-danger" data-bind="visible: model.gotError(), text: model.error()">
    </div>
    <div class="panel panel-primary">
        <div class="panel-heading">Authentication</div>
        <table class="table table-striped">
            <tr><td>Authenticated:</td><td data-bind="text: model.authenticated()"></td></tr>
            <tr><td>User:</td><td data-bind="text: model.username()"></td></tr>
            <tr>
                <td colspan="2">
                    <button data-bind="click: testAuth">
                        Authenticate
                    </button>
                </td>
            </tr>
        </table>
    </div>
    <div class="panel panel-primary">
        <div class="panel-heading">Product Controller Functions</div>
        <table class="table table-striped">
            <tr>
                <td><button data-bind="click: getProducts">Get Products</button></td>
                <td><button data-bind="click: testDeleteProduct">Delete Product</button></td>
                <td><button data-bind="click: testChangeProduct">Change Product</button></td>
            </tr>
        </table>
    </div>

    <div class="panel panel-primary">
        <div class="panel-heading">Order Controller Functions</div>
        <table class="table table-striped">
            <tr>
                <td><button data-bind="click: getOrders">Get Orders</button></td>
                <td><button data-bind="click: testDeleteOrder">Delete Order</button></td>
                <td><button data-bind="click: testSaveOrder">Save Order</button></td>
            </tr>
        </table>
    </div>*@


@section Scripts {
    <script src="~/Scripts/storeCustomerModel.js"></script>
    <script src="~/Scripts/storeCustomerController.js"></script>
}

<div class="navbar navbar-inverse" role="navigation">
    <a class="navbar-brand" href="#">SPORTS STORE</a>
    @Html.Partial("CartWidget");
</div>

<div id="categories" class="col-xs-3">
    <button class="btn btn-block btn-default btn-lg"
            data-bind="click: setCategory.bind(null)">
        Home
    </button>
    <div data-bind="foreach: customerModel.productCategories()">
        <button class="btn btn-block btn-default btn-lg"
                data-bind="click: setCategory.bind($data), text: $data,
                    css: {'btn-primary': $data ==
                        customerModel.selectedCategory()}"></button>
    </div>
</div>

<div class="alert alert-danger col-xs-8"
     data-bind="visible: model.gotError(), text: model.error()">
</div>

<div class="col-xs-8">
    <div class="row panel" data-bind="visible: customerModel.currentView() == 'list'">
        @Html.Partial("ProductList")
    </div>
    <div class="row panel"
         data-bind="visible: customerModel.currentView() == 'cart'">
        @Html.Partial("ProductCart")
    </div>
    <div class="row panel"
         data-bind="visible: customerModel.currentView() == 'checkout'">
        @Html.Partial("Checkout")
    </div>
    <div class="row panel"
         data-bind="visible: customerModel.currentView() == 'thankyou'">
        @Html.Partial("ThankYou")
    </div>
</div>
